<template>
	<view>
		<view style="height:460rpx" :class="positive ? 'cbg-dbb13c' : 'cbg-62b27c'">
			<view class="pl-48 pr-48 pt-94 h-62 flex f-row-nowrap f-ai-center">
				<view class="flex-1 cfs-fff fs-30" @click="dateshow = true">{{ date0 }}</view>
				<view class="cfs-fff fs-30 mr-20" :class="!positive ? 'pt-18 pb-18 pl-24 pr-26  cbg-6eba89' : ''"
					@click="changeType(false)">支出</view>
				<view class="cfs-fff fs-30" :class="positive ? 'pt-18 pb-18 pl-24 pr-26 fs-30 cbg-e0b944' : ''"
					@click="changeType(true)">收入</view>
			</view>
			<view class="pt-70 pb-40 pl-48 cfs-fff">共{{ positive ? '收入' : '支出' }}</view>
			<view class="fs-56 fw-500 pl-48 cfs-fff">¥{{ allMoney }}</view>
		</view>
		<view class="pt-90 pl-50 fs-36 cfs-353535 fw-500">{{ positive ? '收入构成' : '支出构成' }}</view>
		<view style="height: 360rpx;" class="pt-60">
			<qiun-data-charts type="ring" :chartData="chartData" :opts="opts" />

		</view>



		<u-datetime-picker :show="dateshow" v-model="datevalue" :maxDate="maxDate" mode="year-month" closeOnClickOverlay
			@close="dateClose" @confirm="dateConfirm" @cancel="dateCancel"></u-datetime-picker>
	</view>
</template>
<script>
import { formatDate, obj2Arr, roundToNDecimal } from '@/utils/share'
import { fetchMingXiData } from '@/apis/index'
import { createNamespacedHelpers } from 'vuex'
const { mapState: CategoryMapState } = createNamespacedHelpers('Category')

export default {
	name: 'TongJiPage',
	data() {
		return {
			positive: false, //true:收入(入账) false:支出
			date0: '',
			dateshow: false,
			datevalue: '',
			maxDate: new Date().getTime(),
			allData: [],
			allMoney: 0,
			top8Data: [],
			chartData: {},
			opts: {
				rotate: false,
				rotateLock: false,
				color: ['#62b27c', '#6fb989', '#7ec297', '#8cc8a1', '#9bd2af', '#acd8be', '#cce7d9', '#eef8f3'],
				padding: [5, 5, 5, 5],
				dataLabel: true,
				enableScroll: false,
				legend: {
					show: false,
				},
				title: {
					name: "",
					fontSize: 0,
					color: "transparent"
				},
				subtitle: {
					name: "",
					fontSize: 0,
					color: "transparent"
				},
				extra: {
					ring: {
						ringWidth: 30,
						activeOpacity: 0.5,
						activeRadius: 10,
						offsetAngle: -90,
						labelWidth: 15,
						border: true,
						borderWidth: 2,
						borderColor: "#FFFFFF"
					}
				}
			}


		}
	},
	computed: {
		...CategoryMapState({
			zhiChuType: 'zhiChuType',
			shouRuType: 'shouRuType',
		})
	},
	methods: {
		async fetchData() {
			const params = {
				pageNumber: 1,
				pageSize: 150,
				positive: this.positive,
				date: this.datevalue

			}
			const r = await fetchMingXiData(params)
			this.allMoney = 0 //每次请求把上次累加和重置
			r.forEach(item => {
				const list = item.positive ? this.shouRuType : this.zhiChuType
				const o = list.find(v => v.id === item.typeId)
				item.name = o ? o.name : ''
				item.value = item.money
				this.allMoney += item.money

			})
			r.sort((a, b) => b.money - a.money)
			this.allMoney = this.allMoney.toFixed(1)
			this.allData = Object.freeze(r)
			//根据typeId分组
			this.groupByTypeId(r)


		},
		changeType(v) {
			if (v === this.positive) return
			uni.setNavigationBarColor({
				frontColor: '#ffffff', //tips:设置backgroundColor还需要设置frontColor颜色 
				backgroundColor: v ? '#dbb13c' : '#62b27c',
			})
			this.positive = v
			this.fetchData()
		},
		setDatevalue(v) {
			if (!v) v = new Date()
			formatDate(v, (dateInfo) => {
				const { year, month } = dateInfo
				this.date0 = `${year}年${month}月`
				this.datevalue = `${year}-${month}`

			})
		},
		dateClose() {
			this.dateshow = false
		},
		dateCancel() {
			this.dateshow = false
		},
		dateConfirm(v) {
			console.log('v', v)
			this.setDatevalue(v.value)
			this.dateshow = false
		},
		groupByTypeId(list) {
			const obj = {}
			list.forEach(item => {
				if (!obj[item.name]) obj[item.name] = Math.round(item.money)
				else obj[item.name] += Math.round(item.money)
			})
			let arr = obj2Arr(obj)
			arr = arr.slice(0, 8).sort((a, b) => b.value - a.value)
			const sum = arr.reduce((prev, next) => {
				prev += next.value
				return prev
			}, 0)
			arr.forEach(item => item.labelText = `${item.name} ${roundToNDecimal(item.value * 100 / sum, 2)}%`)
			this.top8Data = arr
			this.chartData = {
				series: [{
					data: this.top8Data
				}]
			}
		  this.opts.color=this.positive ? ['#e8b954', '#e2c47d', '#e4ca8e', '#e5d09d', '#e7d5ad', '#e8dab9', '#e9dfc8', '#ebe8de'] : ['#62b27c', '#6fb989', '#7ec297', '#8cc8a1', '#9bd2af', '#acd8be', '#cce7d9', '#eef8f3']



		},




	},
	created() {
		this.setDatevalue()
		this.fetchData()
	},


}
</script>
